<template>
  <div>
    <public-head :title="title" :path="path" :monthlyReport="monthlyReport" />
    <CalenderCard :markDateMore="markDateMore" />
    <!-- v-on:choseDay="clickDay"
      v-on:changeMonth="changeDate" -->
    <!-- </Calendar> -->
    <!-- // v-on:isToday="clickToday"
      // :markDate=arr // arr=['2018/4/1','2018/4/3'] 标记4月1日和4月3日 简单标记
      //:markDateMore=arr // 多种不同的标记
      //第一个标记和第二个标记不能同时使用
      // :agoDayHide='1514937600' //某个日期以前的不允许点击  时间戳10位
      // :futureDayHide='1525104000' //某个日期以后的不允许点击  时间戳10位
      // :sundayStart="true" //默认是周一开始 当是true的时候 是周日开始 -->
    <div v-for="(item, index) in commutingData" :key="index">
      <div class="dayContent">
        <div class="dayaNav">
          <div class="navDate">{{ item.dates }}</div>
          <div class="navTime">
            总工时 <span>{{ item.totalTime }}</span>
          </div>
        </div>
        <div class="dayTimes">
          <div class="upTime">
            <div><span>上</span>上班时间</div>
            <div>{{ item.uptime }}</div>
          </div>
          <div class="dowmTime">
            <div><span>下</span>上班时间</div>
            <div>{{ item.dowmtime }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PublicHead from "../../../components/PublicHead";
import CalenderCard from "./CalenderCard";
export default {
  components: {
    PublicHead,
    CalenderCard,
  },
  data() {
    return {
      title: "我的考勤",
      path: "kaoqin",
      monthlyReport: true,
      commutingData: [
        {
          dates: "2021-04-23 (星期二)",
          totalTime: "7h20m",
          uptime: "07:34:54",
          dowmtime: "17:23:23",
        },
        {
          dates: "2021-04-22 (星期一)",
          totalTime: "8h10m",
          uptime: "07:34:54",
          dowmtime: "17:23:23",
        },
        {
          dates: "2021-04-21 (星期日)",
          totalTime: "8h20m",
          uptime: "07:34:54",
          dowmtime: "17:23:23",
        },
      ],
      markDateMore: [],
    };
  },
  name: "KaoQin",
  created() {
    this.formatMarkDateMore();
  },
  methods: {
    formatMarkDateMore() {
      // moke原始数据
      const markData = [
        {
          name: "work_overtime",
          data: ["2021/7/3", "2021/7/10", "2021/7/17"],
        },
        {
          name: "leave",
          data: ["2021/7/12"],
        },
        {
          name: "vacation",
          data: ["2021/7/19"],
        },
      ];
      //整理数据
      let newArray = [];
      if (markData.length != 0) {
        markData.map((markData) => {
          if (markData.data.length != 0) {
            markData.data.map((el) => {
              newArray.push({ date: el, className: markData.name });
            });
          }
        });
      }

      this.markDateMore = newArray;
    },
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.dayContent{
  width 100%
  background-color #fff
  height 114px
  margin 10px 0
  padding 0px 15px
  box-sizing border-box
  .dayaNav{
    border-bottom 1px solid #ddd
    line-height   40px
    display flex
    justify-content space-between
    .navDate{
      color #333333
      font-size 15px
    }
    .navTime{
      color #999999
      font-size  12px
      span{
        color #F95425
      }
    }
  }
  .dayTimes{
    font-size 12px
    line-height 36px
    color #666666
    .upTime , .dowmTime{
      display flex
      justify-content space-between
      span{
        background-color #999
        border-radius 50%
        color #fff
        padding 2px
        margin-right 5px
      }
      div:last-child{
        color #333333
      }
    }
    .upTime{
      span{
        background-color #198AFF
      }
    }
  }
}
</style>
